import React from 'react'
import { withRouter } from 'react-router-dom'
// ===================================================================== antd
import { Layout, Menu } from 'antd'
import Router from '#frame/router'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// 2022-7-1 伍智睿
// const { SubMenu, Item } = Menu
// ===================================================================== private template
const Content = $Lazy.load(()=>import('@tp/content'))
// ===================================================================== component
class Frame extends React.Component{
	state = {
		selectedKeys:[],
		defaultOpenKeys: [],
		key:0,
		user: $fn.getUser()
	}
	data = window.$fn.getRouter(this.props.data)
	selectedKeys = this.getKey()
	defaultOpenKeys = this.getOpenKeys()
	componentDidMount(){
		this.selectedKeys = this.getKey()
		this.defaultOpenKeys = this.getOpenKeys()
		// 发布订阅
		window.proxy = {
			refresh: () => {
				let { key } = this.state
				key ++
				this.setState({ key })
			}
		}
	}
	onSelect = v => {
		if(!isNaN(+v.key)){
			this.props.history.push('/404');
			return
		}
		if (this.props.history.location?.pathname === v.key) {
			return
		}
		this.props.history.push(v.key);
		this.setState({ selectedKeys: this.getKey(), key: this.state.key +1 })
		this.getOpenKeys()
	}
	onToggle = () => this.setState({collapsed:!this.state.collapsed},()=>{
		$fn.longSave('collapsed', this.state.collapsed)
	})
	// 从路由获取 key 值
	getKey(){
		let hash = window.location.hash
		hash = hash.replace('#','')
		return [ hash ]
	}
	// 当前路由的数据中的 index
	getOpenKeys(){
		// 2022-7-1 伍智睿 更新antd后 使用最新书写方式
		// let index = 0
		const url = this.getKey()[0]
		const stack = []
		// this.props.data.forEach((v,i)=>{
		// 	if(url === v.path){
		// 		index = i
		// 		$fn.setTitle(v.title)
		// 	}else{
		// 		stack.push(i)
		// 	}
		// 	if($fn.hasArray(v.children)){
		// 		v.children.forEach((m,k)=>{
		// 			if(url === m.path){
		// 				index = i
		// 				$fn.setTitle(m.title)
		// 			}
		// 		})
		// 	}
		// })
		// stack = stack.map(v=>v.toString())
		// return [url, index.toString(),...stack]
		const getOpenKey = (data, parent) => {
			$fn.hasArray(data) && data.forEach(v => {
				if (url === v.path) {
					$fn.setTitle(v.title)
				} else {
					if ($fn.hasArray(v.children)) {
						stack.push(v.id ? v.id : v.path)
						getOpenKey(v.children, v)
					}
				}
			})
		}
		getOpenKey(this.data)
		return stack
	}
	path(m){
		const path = m.path
		// if(m.model && m.project){
		// 	return path ? path + '/' + m.model + '/' + m.project : null
		// }else{
		// 	return path
		// }
		return path
	}
	// 2022-7-1 伍智睿 更新antd后 使用最新书写方式
	getItems = data => {
		if ($fn.hasArray(data)) {
			return data.map((v, i) => ({
				key: v.children?.length ? v.id : v.path,
				label: v.title,
				icon: v.icon ? <i className={`iconfont icon${v.icon} rel`} style={{top:1,marginRight:3}}></i> : null,
				children: this.getItems(v.children)
			}))
		}
	}
	
	render(){
		const { data } = this
		const {selectedKeys, collapsed, key, user } = this.state
		let keys = $fn.hasArray(selectedKeys) ? selectedKeys : this.selectedKeys
		return (
			<Layout className='wh fx'>
				{/* 导航 */}
				<Layout.Sider className='ex' id='menu' theme='light' width={$fn.menuWidth} collapsible trigger={null} collapsed={collapsed}>
					<div className='h fv'>
						<div className='ex rel'>
							<Content scrollY>
								<Menu className='h' items={this.getItems(data)} inlineIndent={12} mode='inline' theme='light' selectedKeys={keys} defaultOpenKeys={this.defaultOpenKeys} onClick={this.onSelect} >
									{/** 2022-7-1 伍智睿 更新antd后 使用最新书写方式
										$fn.hasArray(data) && data.map((v,i)=>(
											v.title && (
												$fn.hasArray(v.children) ? (
													<SubMenu key={i} title={<><i className={`iconfont icon${v.icon} rel`} style={{top:1,marginRight:3}}></i><span>{v.title}</span></>}>
														{
															$fn.hasArray(v.children) && v.children.map((p,k)=>{
																return $fn.hasArray(p.children) ? (
																	<SubMenu key={i + '-' + k } title={p.title}>
																		{
																			$fn.hasArray(p.children) ? p.children.map((m,j)=> <Item url={this.path(m)} key={this.path(m)}>{m.title}</Item> ) : null
																		}
																	</SubMenu>
																): <Item key={this.path(p)} url={this.path(p)} className='fxm'>{ p.icon && <i className={`iconfont icon${p.icon} rel`} style={{top:1,marginRight:3}}></i>}<span>{p.title}</span></Item>
															})
														}
													</SubMenu>
												) : <Item key={this.path(v) || i} url={this.path(v)}>{ v.icon && <i className={`iconfont icon${v.icon} rel`} style={{top:1,marginRight:3}}></i>}<span>{v.title}</span></Item>
											)
										))
									**/}
								</Menu>
							</Content>
						</div>
						<div className='fxmc tc f12 lh18 tbor1'>
							<dl className='g9'>
								<dd>诺森医学检验</dd>
								<dd>{user?.company}</dd>
							</dl>
						</div>
					</div>
				</Layout.Sider>
				{/* 内容 */}
				<section className='ex rel'>
					<Router data={data} skip={ this.props.skip } key={key}/>
				</section>
			</Layout>
		)
	}
}

export default  withRouter(Frame)
